<template>
  <!-- 搜索头 -->
  <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
    <el-form-item>
      <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
        查看已删门店
      </el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels
        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <!-- <el-select placeholder="选择品牌" v-model="formInline.brand_id" @change="brandChange" filterable>
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select> -->
      <el-select placeholder="选择门店" v-model="formInline.store_id" filterable>
        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <dj-button size="small" @search="searchClick" />
    </el-form-item>
  </el-form>
</template>

<script>
import { getStoreList } from '@/api/searchHeader/dj-search-tbs';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  // props: ["categoryId"],
  props: {
    categoryId: {
      type: String,
      required: true
    },
    storeId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      storeList: null,
      brandList: [],
      formInline: {
        brand_id: '',
        store_id: '',
        begin_time: '',
        end_time: '',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(-1),
      pickerDate: pickerDateF(-1, -1)
    };
  },
  activated() {
    this.getStore();
    // if (!this.storeList||this.store_id) {
    // }
  },
  methods: {
    lookDelChange() {
      this.getStore();
    },
    getStore() {
      getStoreList({ look_del: this.formInline.look_del, category_id: this.categoryId }).then(response => {
        if (!this.storeList) {
          // console.log("参考",response)
          let data = response.filter(res => res.id == this.$store.getters.optionId);
          if (data.length > 0) {
            this.formInline.store_id = data[0].id;
          } else {
              if(response.length > 0) {
                  this.formInline.store_id = response[0].id;
              }
          }
        }
        this.storeList = response;
        if (this.storeId) {
          this.formInline.store_id = this.storeId;
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        //第一个参数名为调用的方法名，第二个参数为需要传递的参数
        this.$emit('fetchData', this.formInline);
      });
    }
  }
};
</script>